<template>
  <div class="container">
    <aside>左边侧边栏</aside>
    <main>
      <header>头部</header>
      <div class="wrap">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;

  aside {
    width: 150px;
    height: 100%;
    background: lightblue;
  }

  main {
    flex: 1;
    height: 100%;
    overflow: auto;

    header {
      height: 60px;
      padding: 0 20px;
      background: lightcoral;
    }

    .wrap {
      padding: 20px;
    }
  }
}
</style>
